<div class="drag_chart_comp">
    <p class="chart_title">TCP连接数</p>
    <div id="chart1" class="chart_item"></div>
</div>
<script>
let data1 = [];
let data2 = [];
let data3 = [];
let now = new Date();

function randomData1() {
  now = new Date(now.getTime() + 1000);
  let value = Math.random() * 20
  return [
    now,
    Math.round(value + 10)
  ]
}

function randomData2() {
  now = new Date(now.getTime() + 1000);
  let value = Math.random() * 20
  return [
    now,
    Math.round(value + 50)
  ]
}

function randomData3() {
  now = new Date(now.getTime() + 1000);
  let value = Math.random() * 5
  return [
    now,
    Math.round(value + 30)
  ]
}

let chart1 = echarts.init(document.getElementById('chart1'), 'macarons')
for (let i = 0; i < 50; i++) {
  let a1 = randomData1()
  data1.push(a1);
  let a2 = randomData2()
  data2.push(a2);
  let a3 = randomData3()
  data3.push(a3);
}
chart1.setOption({
  legend: {
    x: 120,
    y: 30,
    textStyle: {
      fontSize: 14,
      color: '#fff'
    },
    data: ['ESTAB', 'NON_ESTAB', 'TOP_TOTAL']
  },
  grid: {
    x2: 40,
    borderColor: 'transparent',
  },
  xAxis: [
    {
      type: 'time',
      splitNumber: 4,
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 14
        }
      },
      splitLine: {
        lineStyle: {
          color: '#306192'
        }
      },
      splitArea: {
        show: false,
      }
    }
  ],
  yAxis: {
    type: 'value',
    max: 100,
    min: 0,
    axisLabel: {
      formatter: '{value} %',
      margin: 18,
      textStyle: {
        color: '#fff',
        fontSize: 14
      }
    },
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: 'ESTAB',
      type: 'line',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#92e0e1',
          }
        }
      },
      data: data1
    },
    {
      name: 'NON_ESTAB',
      type: 'line',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#64c7f8',
          }
        }
      },
      data: data2
    },
    {
      name: 'TOP_TOTAL',
      type: 'line',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#b8bcec',
          }
        }
      },
      data: data3
    }
  ]
})
</script>
